<template>
  <!-- type="inline" -->
  <!-- <ckeditor ref="ckeditor" v-show="editShow" style="width: 100%;" @ready="editShow = true" @focus="customHandler" @blur="customHandler" @input="customHandler" :config="editorConfig" v-model="editorData"></ckeditor> -->
  <div>
    <textarea style="display: none;" :id="elId" rows="0" cols="0"></textarea>
  </div>
</template>
<script>
export default {

  data() {
    return {

      elId: ('editor' + Math.random()).split('.').join(''),

      editShow: false,
      editorData: '',

      // 是否已设置过值 了
      hasSetValue: false,

      // ckeditor 是否加载完成
      hasInitDone: false
    }
  },

  computed: {

  },

  created() {
    // console.log('ex-html-editor value init: ' + this.value)
    var _this = this
  },

  mounted() {

    var _this = this

    //console.log('mounted:' + this.value)
    //console.log('mounted:' + this.hasSetValue)


    var ckeditorConfig = {

      removePlugins: 'easyimage,cloudservices',

      uploadUrl: this.uploadUrl,


      stylesSet: [{
          name: 'Narrow image',
          type: 'widget',
          widget: 'image',
          attributes: {
            'class': 'image-narrow'
          }
        },
        {
          name: 'Wide image',
          type: 'widget',
          widget: 'image',
          attributes: {
            'class': 'image-wide'
          }
        }
      ],

      contentsCss: [
        '//haigui-index.oss-cn-hangzhou.aliyuncs.com/lib/ckeditor_4.14.0_full/contents.css',
        '//haigui-index.oss-cn-hangzhou.aliyuncs.com/lib/ckeditor_4.14.0_full/widgetstyles.css'
      ],

      image2_alignClasses: ['image-align-left', 'image-align-center', 'image-align-right'],
      image2_disableResizer: true,

      // 文件上传，不配置就不会有上传入口
      filebrowserUploadUrl: this.uploadUrl

    };

    //console.log(this.autoHeight)
    //console.log(this.height)

    // 自动增长高度
    if (this.autoHeight) {

      ckeditorConfig.autoGrow_maxHeight = _this.height

      ckeditorConfig.extraPlugins = 'uploadimage,image2,autogrow';

      ckeditorConfig.toolbarGroups = [
        { name: 'insert' },
        { name: 'colors' },
        { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'] }
      ]
    }
    // 指定了高度
    else {

      ckeditorConfig.height = _this.height

      ckeditorConfig.extraPlugins = 'filebrowser,uploadimage,image2';

      ckeditorConfig.toolbarGroups = [
        { name: 'clipboard', groups: ['undo'] },
        { name: 'insert' },
        { name: 'styles' },
        '/',
        { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
        { name: 'tools' },
        { name: 'colors' },
        { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'] },
        { name: 'links' },
      ];
    }



    //var editor = CKEDITOR.replace(_this.elId, ckeditorConfig);

    var editor = CKEDITOR.replace(_this.elId, ckeditorConfig);


    _this.editor = editor;

    _this.editor.on('change', function(evt) {

      if (!_this.hasSetValue) {
        _this.hasSetValue = true
      }

      _this.$emit('input', evt.editor.getData())

    });


    _this.editor.on('uploadSuccess', function(evt) {

      //console.log('uploadSuccess')

    });

    _this.editor.on('instanceReady', function(e) {
      // alert(e.editor.name+'加载完毕！')
      //console.log('init done')

      _this.hasInitDone = true

      if (_this.value && !_this.hasSetValue) {

        _this.editor.setData(_this.value)
        this.hasSetValue = true
      }

    });


  },

  destroy() {
    this.editor.destroy()
    this.editor = null
    //console.log('destryo')
  },

  props: {
    value: {
      default: ''
    },
    height: {
      type: Number,
      default: 400
    },
    autoHeight: {
      type: Boolean,
      default: false
    },
    uploadUrl: {
      type: String,
      default: '/apollo/ckeditor/CkeditorRpc/upload.json'
    }
  },
  methods: {
    setData(input) {
      this.editor.setData(input)
    },
    getData() {
      return this.editor.getData()
    }

  },
  watch: {
    value: function(val, old) {
      var _this = this

      // if ( this.hasSetValue && this.hasInitDone) {
      //   _this.editor.setData(val)
      // }

      if (!this.hasSetValue && this.hasInitDone) {
        this.hasSetValue = true
      }

    }
  }
}

</script>
<style>
</style>
